<!--  -->
<template>
  <div>
    <div class="tableBox">
      <table class="table-base" border="0" cellspacing="0" cellpadding="0">
        <thead>
        <tr>
          <td
            v-for="(th,i) in tableHead"
            :key="i"
            :style="!tableHeadWidth[th] ? `width: 80px` :''"
          >
            <div class="table-th-new">{{th}}</div>
          </td>
          <td v-if="tableObj.isOperate"><div class="table-th-new">操作</div></td>
        </tr>
        </thead>
        <tbody v-if="tableObj.tableData.length > 0">
          <template v-for="(item,i) in tableObj.tableData">
            <tr :key="`a-${i}`">
              <td rowspan="2">
                {{i + 1}}
              </td>
              <td style="height: 80px">
                <div class="item second-item">{{item.categoryName}}</div>
              </td>
              <td>
                <div class="item second-item">{{item.brandName}}</div>
              </td>
              <td>
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="item.goodsName"
                  placement="top-end"
                  :disabled="!item.goodsName"
                >
                  <div class="item fouth-item">{{item.goodsName}}</div>
                </el-tooltip>
              </td>
              <td>
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="item.model"
                  placement="top-start"
                  :disabled="!item.model"
                >
                  <div class="item second-item">{{item.model}}</div>
                </el-tooltip>
              </td>
              <td>
                <div class="item second-item">{{item.unit}}</div>
              </td>
              <td>
                <div class="item second-item">
                    <div v-if="showEditInput&&tableDataObj.tableData"  style="padding: 10px; text-align: center;">
                      <el-input-number size="mini" v-model="tableDataObj.tableData[i].num" />
                      <!-- <el-input v-model="tableDataObj.tableData[i].num"></el-input> -->
                    </div>
                  <template v-else>{{item.num}}</template>
                </div>
              </td>
              <td>
                <div class="item eighth-item">{{item.weight}}</div>
              </td>
              <td>
                <div class="item nineth-item">
                  {{item.salesPrice * 100 | priceFilter}}
                  <!-- <el-form-item v-if="showEditInput&&tableDataObj.tableData" prop="salesPrice">
                    <el-input v-model="tableDataObj.tableData[i].salesPrice"></el-input>
                  </el-form-item>
                  <template v-else>{{item.salesPrice | priceFilter}}</template> -->
                </div>
              </td>
              <td>
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="item.spec"
                  placement="top-start"
                  :disabled="!item.spec"
                >
                  <div class="item second-item">
                    <p class="packListText">{{item.spec}}</p>
                  </div>
                </el-tooltip>
              </td>
              <td>
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="item.packingList"
                  placement="top-start"
                  :disabled="!item.packingList"
                >
                  <div class="item second-item">
                    <p class="packListText">{{item.packingList}}</p>
                  </div>
                </el-tooltip>
              </td>
              <td>
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="item.packageSize"
                  placement="top-start"
                  :disabled="!item.packageSize"
                >
                  <div class="item second-item">
                    <p class="packListText">{{item.packageSize}}</p>
                  </div>
                </el-tooltip>
              </td>
              <td  v-if="tableObj.isOperate">
                <div class="operate">
                  <p class="editBtn" @click="itemEditBtn(item.id,(i+1))">编辑</p>
                  <p class="deleteBtn" @click="itemDeleteBtn(item)">删除</p>
                </div>
              </td>
            </tr>
            <tr :key="`b-${i}`">
              <td :colspan="tableHead.length + (tableObj.isOperate ? 0 : -1)" >

                <div class="itemDetail">

                  <div class="itemContent left" style="position: relative;">
                    <div class="title">
                      <p>商品条码：</p>
                      <p>{{item.itemBarcode}}</p>
                    </div>

                    <div class="title" style=" position: absolute;left: 0; width: 800px">
                      <p style="width: 95px">备注：</p>
                      <p style="flex: 1; -webkit-line-clamp: 3;height: 70px">{{item.remark}}</p>
                    </div>

                  </div>
                  <div class="itemContent center">
                    <ul>
                      <li>
                        <p class="title">京东/妥了网链接：</p>
                        <el-tooltip
                          class="item"
                          effect="dark"
                          :content="item.refLink1"
                          placement="top-start"
                          :disabled="!item.refLink1"
                        >
                          <p class="reflinks">{{item.refLink}}</p>
                        </el-tooltip>
                      </li>

                    </ul>
                  </div>
                  <div class="itemContent right">
                    <div class="imgBox">
                      <div class="title">商品图片：</div>
                      <ul
                        class="img"
                        v-if="JSON.parse(item.refImgs)&&JSON.parse(item.refImgs).length>0"
                      >
                        <li
                          v-for="(img,index) in JSON.parse(item.refImgs)"
                          :key="index"
                          v-show="img&&index<4"
                        >
                          <el-image :src="img" :preview-src-list="srcList[i]"></el-image>
                        </li>
                        <li class="ellipsis" v-if="JSON.parse(item.refImgs).length>4">...</li>
                      </ul>
                    </div>
                  </div>
                </div>

              </td>
            </tr>
          </template>
        </tbody>
        <tr v-else>
          <td :colspan="tableHead.length + 1"><div class="no-data">暂无数据</div></td>
        </tr>
      </table>
      <div class="tableList">
        <div class="pagesBox" v-if="tableObj.tableData.length>0&&tableObj.isShowPages">
          <el-pagination
            v-if="hasPagination"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currPage"
            :page-sizes="pageArr"
            :page-size="currSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableObj.total"
          ></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import Edit from './component/Edit.vue'

export default {
  props: {
    tableObj: {
      // 渲染的数据
      type: Object,
      require: true,
      default: () => {},
    },

    showEditInput: {
      // 是否直接在table里编辑
      type: Boolean,
      default: false,
    },
    editFunc: {
      // 编辑按钮调用方法
      type: Function,
    },
    hasPagination: {
      // 分页
      type: Boolean,
      default: true,
    },
  },
  // components: { Edit },
  data () {
    return {
      proNum: '', // 产品编号
      editId: 0,
      currPage: 1, // 当前页码
      currSize: 10, // 当前页条数
      pageArr: [10, 20, 30, 40], // 显示每页条数
      tableHeadWidth: {
        商品名称: '1',
      },
      tableHead: [
        '序号',
        '类目',
        '品牌',
        '商品名称',
        '型号',
        '单位',
        '数量',
        '重量(kg)',
        // '成交价(折扣价)',
        '挂网价',
        '参数规格',
        '包装清单',
        '外包装尺寸(mm)',
      ],
      tableDataObj: {
        // 供修改table使用
        tableData: [{ num: 0, finalPrice: 0.0, salesPrice: 0.0 }],
      },
      srcList: [], // 大图预览list
    }
  },
  computed: {},
  watch: {
    tableObj: {
      handler: function (val) {
        if (val.tableData) {
          this.copyTableObj()
          this.$nextTick(() => {
            if (!this.hasPagination) {
              // 不带分页器时需设置最大高度
              document.getElementById('tableBody') &&
                (document.getElementById('tableBody').style.maxHeight =
                  '450px')

              // 防止table出现滚动条时，单元格无法对齐
              if (this.$refs.form && this.$refs.form.$el.clientHeight > 450) {
                document.getElementById('tableHead').style.width =
                  this.$refs.form.$el.clientWidth + 'px'
              }
            }
          })

          val.tableData.map((item, i) => {
            this.srcList.push([])
            if (item.refImgs) {
              const imgs = JSON.parse(item.refImgs)
              if (imgs && imgs.length > 0) this.srcList[i] = imgs
              else this.srcList[i] = []
            }
          })
        }
      },
      deep: true,
      immediate: true,
    },
    tableDataObj: {
      handler: function (val, oldVal) {
        let totalFinalPrice = 0
        let totalSalesPrice = 0
        val.tableData.map(item => {
          item.num = parseInt(item.num) || 0
          totalFinalPrice += parseFloat(item.finalPrice) * item.num
          totalSalesPrice += parseFloat(item.salesPrice) * item.num
        })
        // 转化为分
        this.$emit('totalFinalPrice', totalFinalPrice * 100)
        this.$emit('totalSalesPrice', totalSalesPrice * 100)
        this.$emit('tableData', val.tableData)
      },
      deep: true,
    },
  },
  methods: {
    // 编辑
    itemEditBtn (id, i) {
      if (this.editFunc) {
        this.editFunc(id)
      } else {
        this.proNum = i // 商品序号
        this.editId = id // 商品id
        const editNeedParam = {
          proNum: this.proNum,
          editId: this.editId,
        }
        this.$emit('showEditWindow', editNeedParam)
      }
    },
    // 删除
    itemDeleteBtn (obj) {
      const _this = this
      _this
        .$confirm('确定删除该信息吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
        .then(() => {
          _this.$emit('removeData', obj)
        })
        .catch(() => {})
    },
    // 分页 设置每页条数
    handleSizeChange (val) {
      this.currSize = val
      this.currPage = 1
      this.$emit('currSize', val)
      this.$emit('currPage', 1)
    },
    // 当前页
    handleCurrentChange (val) {
      this.currPage = val
      this.$emit('currPage', val)
    },
    editSucc (bl) {
      this.$emit('editDataSucc', bl)
    },
    /**
     * 重置按钮
     */
    resetTable () {
      this.copyTableObj()
    },
    /**
     * 拷贝tableObj以供修改及重置
     */
    copyTableObj () {
      this.tableDataObj = Object.assign(
        {},
        JSON.parse(JSON.stringify(this.tableObj)),
      )
      this.tableDataObj.tableData.map(item => {
        item.num = parseInt(item.num)
        /** ****** 转化为元（方便页面input输入用） ********/
        // item.finalPrice = this.changePrice(item.finalPrice)
        // item.salesPrice = this.changePrice(item.salesPrice)
      })
    },
  },
}
</script>
<style lang='less' scoped>
@themeColor:#298DF8;
.tableBox {
  .tableList {
    text-align: center;
    font-size: 12px;
    .tableHead {
      display: flex;
      align-items: center;
      height: 40px;
      .table-th {
        background: #e4e4e4;
        color: #101010;
        font-size: 14px;
        line-height: 40px;
        text-align: center;
        border: 1px solid #bbb;
        border-left: 0;
        box-sizing: border-box;
      }
      .table-th:first-child {
        width: 60px;
      }
      .table-th:nth-child(8),
      .table-th:nth-child(9),
      .table-th:nth-child(10) {
        line-height: 20px;
      }
      .table-th:nth-child(2),
      .table-th:nth-child(3),
      .table-th:nth-child(5),
      .table-th:nth-child(6),
      .table-th:nth-child(7),
      .table-th:nth-child(11),
      .table-th:nth-child(12) {
        flex: 2;
      }

      .table-th:nth-child(8) {
        width: 50px;
      }
      .table-th:nth-child(9),
      .table-th:nth-child(10) {
        width: 60px;
      }
      .table-th:nth-child(4) {
        flex: 4;
      }
      .table-th:last-child {
        width: 40px;
        border-right: none;
      }
    }
    .tableBody {
      // max-height: 450px;
      overflow-y: auto;
      .no-data {
        color: #999;
        font-size: 16px;
        justify-content: center;
        align-items: center;
        height: 100px;
        line-height: 100px;
      }
      .table-tr {
        display: flex;
        height: 200px;
        width: 100%;
        &:nth-child(even) {
          background: #f6f6f6;
        }
        &.no-data {
          color: #999;
          font-size: 16px;
          justify-content: center;
          align-items: center;
          height: 50px;
        }
        .item-info {
          flex: 1;
          width: calc(100% - 60px);
          .itemList {
            display: flex;
            align-items: center;
            .item {
              border-right: 1px solid #bbb;
              border-bottom: 1px solid #bbb;
              height: 80px;
              padding: 10px 0;
              &:last-child {
                border-right: 0;
              }
              .packListText {
                overflow: hidden;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 4;
                word-break: break-all;
              }
            }
            .second-item,
            .fouth-item {
              flex: 2;
              line-height: 15px;
              overflow: hidden;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 4;
              word-break: break-all;
            }
            .fouth-item {
              flex: 4;
            }
            .eighth-item {
              width: 50px;
            }
            .nineth-item {
              width: 60px;
            }
            .last-item {
              width: 40px;
              border-right: 0;
              p {
                line-height: 20px;
                color: @themeColor;
                cursor: pointer;
                margin-top: 5px;
              }
            }
          }

        }

        .first-item {
          width: 81px;
          height: 200px;
          line-height: 200px;
          border-right: 1px solid #bbb;
          border-bottom: 1px solid #bbb;
          text-align: center;
        }
      }
      .el-input {
        /deep/ .el-input__inner {
          width: 80%;
          height: 30px;
          border-color: #5aa3e5;
          &:focus {
            background-color: #e2ecf4;
          }
        }
      }
    }
  }
  .pagesBox {
    text-align: right;
    padding: 10px 50px 10px 0;
    border-top: 1px solid #bbb;
  }
  /deep/ .el-input__inner {
    padding: 0 3px;
  }
}
.el-form--inline .el-form-item {
  margin: 0;
}
.itemDetail {
  height: 120px;
  // border-bottom: 1px solid #bbb;
  display: flex;
  .itemContent {
    padding: 10px;
    font-size: 12px;
    li {
      display: flex;
      align-content: center;
      margin-bottom: 10px;
      p {
        text-align: left;
        line-height: 16px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      p:first-child {
        font-weight: bold;
      }
    }
    li:last-child {
      .title {
        flex: 1;
        text-align: left;
        span:first-child {
          font-weight: bold;
        }
      }
    }
  }
  .left {
    width: 25%;
    .title {
      display: flex;
      margin-bottom: 20px;
      p {
        text-align: left;
        line-height: 16px;
        width: 70%;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
      p:first-child {
        font-weight: bold;
        text-align: right;
        width: 30%;
      }
    }
  }
  .center {
    width: 50%;
    li {
      .title {
        width: 22%;
      }
      .reflinks {
        width: 70%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 300px;
      }
    }
    li:nth-child(2) {
      .title {
        width: 18%;
      }
    }
    li:nth-child(3) {
      .title {
        width: 30%;
      }
    }
    li:last-child {
      .title {
        width: 48%;
        span {
          width: 70%;
          display: inline-block;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        span:first-child {
          width: 25%;
        }
      }
      .title:first-child {
        span:first-child {
          width: 20%;
        }
      }
    }
  }
  .right {
    width: 25%;
    .imgBox {
      text-align: left;
      display: flex;
      .title {
        font-weight: bold;
        flex: 1;
      }
      .img {
        flex: 2;
        display: flex;
        flex-wrap: wrap;
        position: relative;
        li {
          width: 50px;
          height: 50px;
          border: 1px solid #eee;
          margin-bottom: 5px;
          margin-right: 10px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .ellipsis {
          text-align: center;
          justify-content: center;
          border: none;
          font-weight: bold;
          font-size: 24px;
          background: rgba(255, 255, 255, 0.6);
          position: absolute;
          bottom: 6px;
          right: 45px;
          line-height: 50px;
          margin: 0;
        }
      }
    }
  }
}

.table-base {
  width: 100%;
  font-size: 12px;
  thead {
    td {
      border: 1px solid #bbb;
      background: #e4e4e4;
      vertical-align: middle;
    }
  }
  tbody {
    text-align: center;
    tr {
      border-left: 1px solid #bbb;
    }
    td {
      vertical-align: middle;
      border: 0 solid #bbb;
      border-right-width: 1px;
      border-bottom-width: 1px;
      // height: 80px;
      // line-height: 80px;
      .operate {
        line-height: 20px;
        color: @themeColor;
        cursor: pointer;
        margin-top: 5px;
      }
    }
  }
}

.table-th-new {
  width: 100%;

  color: #101010;
  font-size: 14px;
  // line-height: 40px;
  height: 40px;
  text-align: center;
  border-left: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
<style>
.el-tooltip__popper {
  max-width: 300px;
}
</style>
